<template>
	<view>
		<view class="Gradient">
			<!-- 头部轮播 -->
			<!-- <jswiper :Jinfo="info.banner"></jswiper> -->
			<!-- 广告列表 -->
			<!-- <view class="ad_list" :style="{'margin-top:15rpx':item.colnum==4}">
				<view class="ad_item" :class="{'ad_item1':item.colnum==4,'ad_item2': item.colnum==2,'ad_item4':item.colnum==1,'ad_item3':item.colnum==3}" v-for="item in info.saleBanner" @click="$navTo(item.link)">
					<image :src="item.thumb" mode="widthFix" role="img" class="ad_img"></image>
				</view>
			</view> -->
			<!-- 滚动通知 -->
			<!-- <swiper v-if="danmuList.length>0" class="swiper_danmu" :current="current" :autoplay="true" :interval="3000"
				:duration="1000" vertical :disable-touch="true" @change="danmuChange">
				<swiper-item v-for="(item,index) in danmuList" :key="index">
					<view class="swiper-item">
						<image :src="item.avatar" ></image>
						<text>{{item.nickname}}</text>
						<text>{{item.createtime}}下单</text>
					</view>
				</swiper-item>
			</swiper> -->
			<!-- 分类列表 -->
			<!-- <category :list="meunList"></category> -->
			<!-- 活动专区 -->
			<view class="activity">
				<!-- <view class="activity_left" v-for="item in info.saleBanner" @click="$navTo(item.link)">
					<image :src="item.thumb"></image>
				</view> -->
				<!-- <view class="activity_right">
					<image @click="$navTo('/pages/mallHome/index')" src="https://img.jinghushi.com/images/9/2024/06/O1Sch9QHZlH60TZFj9e1FZcQNLV0Cx.png"></image>
					<image @click="$navTo('/pages/product/supermarket')" src="https://img.jinghushi.com/images/9/2024/06/NKib1vQRII58pOBvj5QIQr1GZe915v.png"></image>
				</view> -->
			</view>
		</view>
		<!-- 秒杀商品列表 -->
		<!-- <jsale></jsale> -->
		<!-- 分类 -->
		<!-- <jshop-class :Jinfo="info.shopclass"></jshop-class> -->
		<!-- 本地超市 -->
		<!-- <view class="s_market" v-if="marketList.length>0" style="background-image: url(https://img.jinghushi.com/images/9/2024/06/s8lEBJmQY8vzj3EbZ7gm1mu441zZ61.png)">
			<view class="m_enter">
				<view>次日就近自提</view>
				<view class="m_go" @click="$navTo('/pages/product/supermarket')">去看看 ></view>
			</view>
			<scroll-view scroll-x="true" class="m_goods">
				<view class="m_good" v-for="item in marketList" @click="$navTo('/pages/product/groupbuy?id='+item.id)">
					<view class="m_logo">
						<image :src="item.thumb"></image>
						<view class="m_tag" style="background-image: url(https://img.jinghushi.com/images/9/2024/04/MSB0YpYbdSySs9b1sF3s1xZ2128638.png);">￥{{item.saleprice}}</view>
					</view>
					<view class="clamp">{{item.title}}</view>
				</view>
			</scroll-view>
		</view> -->
		<!-- 会员专区 -->
		<!-- <view class="vip" @click="$navTo('/pages/user/vipShop')" v-if="buy0List.length>0">
			<image src="/static/index/vip.png" mode="widthFix" class="vip_bg"></image>
			<view class="vip_content">
				<image :src="item.thumb" v-for="(item,index) in buy0List" v-if="index<=3"></image>
			</view>
		</view> -->
		<!-- 热销团购 -->
			<!-- <view class="s_group" style="background-image: url(https://img.jinghushi.com/images/9/2024/04/xBq9dd2saaGcqgndKM9A0y0htB9tuD.png)" v-if="groupList.length>0">
				<view class="top">
					<image src="/static/index/hot.png" mode="widthFix"></image>
					<view style="flex:1;font-size: 20rpx;">到店兑换 • 随时可退</view>
					<view @click="$navTo('/pages/shoptab/shoplist')">查看更多></view>
				</view>
				<scroll-view class="s_list" scroll-x="true">
					<view class="s_item" v-for="item in groupList" @click="$navTo('/pages/product/groupbuy?id='+item.id)">
						<view class="s_flex">
							<view class="logo">
								<image class="logos" :src="item.thumb"></image>
							</view>
							<view class="content">
								<view class="title clamp">
									<text class="">{{item.title}}</text>
								</view>
								<view class="price">￥{{item.saleprice}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view> -->
		<!-- 品牌特卖 -->
		<jbrand class="h1_Jbrand" :Jinfo="info.brand" :Jpic="info.pic"></jbrand>
		<!-- 限时管家 -->
		<!-- <jmarke :Jinfo="info.marketing"></jmarke> -->
		<!-- 优惠专区 -->
		<!-- <jsale-banner :Jinfo="info.saleBanner"></jsale-banner> -->
		<!-- 商家列表 -->
		<jcur-skill ref="skill" class="h1_jcur_skill"></jcur-skill>
		<!-- 主题商品-->
		<!-- <jfactory class="h1_jfactory" :Jinfo="salefactory"></jfactory> -->
		<!-- 推荐，上新，抢购，厨卫 -->
		<!-- <jgoods class="h1_jgoods" id="aa" :Jinfo="recotabshop" :Jpic="info.pic"></jgoods> -->
		<!-- 活动弹层 -->
		<!-- <jwarn-msg :JsrcLink="activitycont" :JmsgShow.sync="activity"></jwarn-msg> -->
	</view>
</template>
<script>
	var i = 300
	import Jswiper from '@/components-home/pages/Jswiper.vue'
	import JshopClass from '@/components-home/pages/Jshopclass.vue'
	import Jbrand from '@/components-home/pages/Jbrand.vue'
	import Jmarke from '@/components-home/pages/Jmarke.vue'
	import JsaleBanner from '@/components-home/pages/JsaleBanner.vue'
	import JcurSkill from '@/components-home/pages/JcurSkill.vue'
	import Jfactory from '@/components-home/pages/Jfactory.vue'
	import Jgoods from '@/components-home/pages/Jgoods.vue'
	import JwarnMsg from '@/components-home/pages/JwarnMsg.vue'
	import category from "@/home_page/components/category.vue"
	import Jsale from "@/components-home/pages/Jsale.vue"
	import {mapState} from 'vuex'
	export default {
		components: {
			Jswiper,
			JshopClass,
			Jbrand,
			Jmarke,
			JsaleBanner,
			JcurSkill,
			Jfactory,
			Jgoods,
			JwarnMsg,
			category,
			Jsale
		},
		data() {
			return {
				danmuList: [],
				current: 0,
				info: {
					banner: [],
				},
				shoplist:[],
				meunList: [],
				groupList: [],//团购热销
				marketList: [],//本地超市
				buy0List: []
			}
		},
		computed: {
		  	...mapState(['Location'])
		},
		mounted() {
			this.getDanmu();
			this.getInfo();
			this.getMenu();
		},
		watch: {
			Location: function(newVal,oldVal){
				// this.getGroupList();//热销团购
				// this.getMarketList();//本地超市
				// this.getBuy0List();
			}
		},
		methods: {
			// 0元购
			getBuy0List(){
				this.$axios('home/buy0list', 'POST', "shop",{
					page: 1,
					cid: 0
				}).then(res => {
					this.isloading = false;
					if(res.data.code==200){
						this.buy0List = res.data.data.list;
					}
				})
			},
			getMarketList(){
				let obj = {
					...this.Location,
					...{
						page: 1
					}
				}
				this.$axios('market/lists','POST','shop',obj).then(res=>{
					if(res.data.code == 200){
						this.marketList = res.data.data;
					}
				})
			},
			getGroupList(){
				this.$axios('home/homegroup', 'POST', 'shop', this.Location).then((res => {
					if (res.data.code == 200) {
						this.groupList = res.data.data.list;
					}
				}))
			},
			getMenu() {
				this.$axios('home/shopcalss', 'POST', 'shop').then((res => {
					if (res.data.code == 200) {
						this.meunList = res.data.data;
					}
				}))
			},
			getInfo() {
				this.$axios('home/main', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			getDanmu() {
				this.$axios('danmu/getdanmu', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.danmuList = this.danmuList.concat(res.data.data);
					}
				})
			},
			danmuChange(e) {
				if (e.detail.current >= this.danmuList.length - 5) {
					if (this.danmuList.length > 30) {
						this.danmuList.splice(0, 25);
						this.current = e.detail.current - 25;
					}
					this.getDanmu();
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	.h1_Jbrand,
	.h1_jcur_skill,
	.h1_jfactory,
	.h1_jgoods {
		margin-top: 20upx;
	}
	.activity{
		display: flex;
		justify-content: space-between;
		view{
			width: 344rpx;
			height: 444rpx;
			// border-radius: 12rpx;
			// overflow: hidden;
		}
		.activity_left{
			image{
				width: 100%;
				height: 100%;
			}
		}
		.activity_right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			image{
				width: 100%;
				// height: 212rpx;
				height: 100%;
			}
		}
	}
	.s_market{
		display: flex;
		justify-content: space-between;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 214rpx;
		align-items: center;
		.m_enter{
			width: 180rpx;
			font-size: 20rpx;
			color: #FFFFFF;
			padding-top: 90rpx;
			padding-left: 20rpx;
			.m_go{
				width: 120rpx;
				line-height: 36rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				font-size: 22rpx;
				color: #3B8921;
				text-align: center;
				margin-top: 20rpx;
			}
		}
		.m_goods{
			width: calc(100% - 180rpx);
			white-space: nowrap;
			.m_good{
				display: inline-block;
				width: 150rpx;
				margin-right: 20rpx;
				border-radius: 12rpx;
				overflow: hidden;
				.m_logo{
					width: 100%;
					height: 136rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						
					}
					.m_tag{
						position: absolute;
						width: 80rpx;
						height: 30rpx;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						line-height: 30rpx;
						color: #fff;
						font-size: 20rpx;
						text-align: center;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						padding-left: 6rpx;
					}
				}
				.clamp{
					font-size: 22rpx;
					text-align: center;
					background: #fff;
					padding: 4rpx 8rpx;
				}
			}
		}
	}
	.vip{
		background: linear-gradient( 87deg, #DFC3A2 0%, #C88B61 100%);
		border-radius: 12rpx;
		width: 100%;
		position: relative;
		padding: 20rpx;
		margin-top: 20rpx;
		.vip_bg{
			position: absolute;
			left: 0;
			right: 0;
			width: 344rpx;
			top: 0;
			margin: auto;
		}
		.vip_content{
			background: #FDFCF5;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			image{
				width: 140rpx;
				height: 140rpx;
				border-radius: 12rpx;
			}
		}
	}
	.s_group{
		padding: 20rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 20rpx 0 10rpx;
		.top{
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;
			margin-bottom: 20rpx;
			align-items: center;
			image{
				width: 180rpx;
				margin-right: 20rpx;
			}
		}
		.s_list{
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			white-space: nowrap;
			.s_item{
				width: 300rpx;
				display: inline-block;
				background: #fff;
				border-radius: 16rpx;
				margin-right: 20rpx;
				height: 140rpx;
				.s_flex{
					height: 100%;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					.logo{
						width: 100rpx;
						height: 100rpx;
						margin-right: 16rpx;
						border-radius: 8rpx;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.content{
						width: calc(100% - 116rpx);
						
						.title{
							color: #333333;
							// overflow-wrap:break-word;
							// white-space: normal;
							font-size: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							
							text{
								word-wrap: break-all;
								white-space: pre-line;
							}
						}
						.price{
							margin-top: 10rpx;
							background: linear-gradient( 90deg, #FD8D44 0%, #FD4C49 100%);
							border-radius: 17rpx;
							width: 84rpx;
							height: 34rpx;
							color: #FFFFFF;
							font-size: 20rpx;
							line-height: 34rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
.ad_list{
		// background: $bg-color;
		padding: 5rpx 20rpx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.ad_item{
			margin-bottom: 0;
			border-radius: 10rpx;
			overflow: hidden;
			border: 2rpx solid #d5aff1;
			.ad_img{
				width: 100%;
				display: block;
			}
		}
		.ad_item1{
			width: 100%;
			&:first-child{
				margin-top: 15rpx;
			}
		}
		.ad_item2{
			width: 49%;
			margin-top: 15rpx;
		}
		.ad_item4{
			width: 24%;
			margin-top: 15rpx;
		}
		.ad_item3{
			width: 32%;
			margin-top: 15rpx;
		}
	}
	.swiper_danmu {
		// background: $bg-color;
		height: 70upx;
		.swiper-item {
			color: #fff;
			display: flex;
			align-items: center;
			line-height: 70upx;
			height: 70upx;
			padding: 20rpx 20rpx 0;
			image {
				border-radius: 50%;
				height: 40upx;
				width: 40upx;
			}
			text {
				margin: 0 10upx;
			}
		}
	}
</style>